import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:my_flu01/widgets/show_modal_bottom_detail.dart';
import 'package:remixicon/remixicon.dart';
import 'package:go_router/go_router.dart';
/**
 * @author hanson
 * @version[创立日期，2023/9/18 9:13]
 * @function[功用简介 ]
 **/

/// 外层抽屉菜单（左）
class MenuScreenLeft extends StatelessWidget {
  const MenuScreenLeft({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //GestureDetector（Gesture：手势Detector：识别）类，通过这个类我们可以识别很多的手势
    return GestureDetector(
      child: const SafeArea(
        child: MenuScreenLeftBody(),
      ),
      onTap: () => ZoomDrawer.of(context)?.toggle.call(),
    );
  }
}


class MenuScreenLeftBody extends StatelessWidget {
  const MenuScreenLeftBody({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      physics: const AlwaysScrollableScrollPhysics(
        parent: BouncingScrollPhysics(),
      ),
      children: [
        Padding(
          padding: EdgeInsets.only(
            top: 72.w,
            bottom: 48.w,
            left: 24.w,
            right: 24.w,
          ),
          child: const Header(),
        ),
        Padding(
          padding: EdgeInsets.only(
            bottom: 24.w,
            left: 24.w,
            right: 24.w,
          ),
          child: const Menu(),
        ),

        /// 插画
        BlockSemanticsToDrawerClosed(
          child: Container(
            padding: EdgeInsets.only(left: 24.w, bottom: 24.w),
            child: Image.asset(
              'assets/images/woolly-comet-2.png',
              width: 240.w,
            ),
          ),
        ),
      ],
    );
  }
}

/// 头部
class Header extends StatelessWidget {
  const Header({super.key});

  @override
  Widget build(BuildContext context) {
    return Semantics(
      button: true,
      label: '关闭设置',
      child: Row(
        children: [
          ClipRRect(
            key: const Key('widget_menu_screen_left_logo'),
            borderRadius: BorderRadius.circular(14.sp),
            child: Image.asset(
              'assets/58.png',
              width: 42.w,
              height: 42.w,
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 12.w),
            child: Text(
              '抽屉页',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.sp,
                fontWeight: FontWeight.bold,
              ),
              semanticsLabel: '',
            ),
          ),
        ],
      ),
    );
  }
}



/// 菜单
class Menu extends StatelessWidget {
  const Menu({super.key});

  @override
  Widget build(BuildContext context) {
    final _titleTextSize = 14.sp;
    final _titleIconSize = 20.sp;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          height: 50,
          margin: EdgeInsets.all(5),
          child: ElevatedButton(
            onPressed: (){
              GoRouter.of(context).push('/login');
            },
            child: Text('登录'),
            style: ButtonStyle(
                backgroundColor:
                MaterialStateProperty.all(Colors.blueAccent), //背景色
                foregroundColor:
                MaterialStateProperty.all(Colors.white) //字体色
            ),
          ),
        ),
        Container(
          height: 50,
          margin: EdgeInsets.all(5),
          child: ElevatedButton(
            onPressed: (){
               GoRouter.of(context).push('/ListViewBuilderPage');
            },
            child: Text('ListView'),
            style: ButtonStyle(
                backgroundColor:
                MaterialStateProperty.all(Colors.blueAccent), //背景色
                foregroundColor:
                MaterialStateProperty.all(Colors.white) //字体色
            ),
          ),
        ),
      ],
    );
  }
}


/// 菜单列表
class MenuList extends StatelessWidget {
  const MenuList({
    super.key,
    this.icon,
    required this.title,
    this.onTap,
  });

  // 图标
  final Widget? icon;
  // 标题
  final Widget title;
  // 点击事件
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListTile(
        leading: icon,
        title: title,
        textColor: Colors.white,
        iconColor: Colors.white,
        minLeadingWidth: 0.w,
        horizontalTitleGap: 28.w,
        onTap: onTap,
      ),
    );
  }
}

/// 侧栏关闭状态下就不显示语义
class BlockSemanticsToDrawerClosed extends StatelessWidget {
  const BlockSemanticsToDrawerClosed({
    super.key,
    required this.child,
  });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<DrawerState>(
      valueListenable: ZoomDrawer.of(context)!.stateNotifier,
      builder: (_, state, child) => BlockSemantics(
        blocking: state == DrawerState.closed,
        child: child,
      ),
      child: child,
    );
  }
}
